<template>
    <div class="adminBrandBox">
        <header class="flex align-center justify-between">
            <span>内容列表</span>
            <aside class="flex">
                <button v-show="!isEditOrder && !category_id"  @click="handleIsEditOrder()" class="custom_primary_btn m-1">编辑排序</button>
                <button v-show="isEditOrder && !category_id" @click="handleSaveSort()" class="custom_primary_btn m-1">保存排序</button>
                <button v-show="isEditOrder && !category_id" @click="handleCancelSort()" class="custom_info_btn m-1">取消排序</button>
                <el-select v-model="category_id" @change="getData()" class="m-1" size="small"  placeholder="请选择规范类型">
                    <el-option size='small' key='00' label='全部' value=""></el-option>
                    <el-option
                    size="small"
                    v-for="item in standardCategory"
                    :key="item.id"
                    :label="item.name"
                    :value='item.id'>
                    </el-option>
                </el-select>
                <el-input
                    size="small"
                    class="m-1 searchIpt"
                    placeholder="请输入项目名称进行搜索"
                    prefix-icon="el-icon-search"
                    @keyup.enter.native="searchStand()"
                    v-model="keyword">
                </el-input>
            </aside>
        </header>
        <ul class="StandList flex flex-wrap" v-show="isShowTable">
            <li class="StandItem" v-for="(item,index) in standardData" :key="item.id">
                <div class="StandItemImg">
                    <img :src="item.covar_path" alt="">
                </div>
                <div class="StandItemInfo">
                    <h4>{{item.name}}</h4>
                    <time>{{item.update_time}} 更新</time>
                </div>
                <!-- <div class="standHover flex justify-center" v-show="!isEditOrder">
                    <i class="el-icon-more" @mouseover="item.isHoverH=true"></i>
                    <ul class="standHoverHandleBox" v-show="item.isHoverH">
                        <li @click.stop="delStand(item.id,index)">删除</li>
                    </ul>
                </div> -->
                <div class="standHover flex justify-end" v-show="!isEditOrder"  @mouseleave="item.isHoverH=false">
                    <div @mouseover="item.isHoverH=true">
                        <i class="el-icon-more"></i>
                    </div>
                    
                    <ul class="standHoverHandleBox" v-show="item.isHoverH">
                        <!-- <li @click="goto(item)">编辑</li> -->
                        <li @click.stop="delStand(item.id,index)">删除</li>
                    </ul>
                </div>
            </li>
        </ul>


        <el-dialog title="" :visible.sync="dialogDelVisible" width='536px'>
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">是否彻底删除此规范吗？</div>
            </div>
            <p class="del_text">
                规范删除后，信息不可恢复<br/>
            </p>
            <div slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="delApi()">删除</button>
                <button class="custom_info_btn" @click="dialogDelVisible = false">取消</button>
            </div>
        </el-dialog>
        <div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
    </div>
</template>
<script>
import Sortable from 'sortablejs'
import {formatData} from '@/utils/index.js'
export default {
    name:'adminBrandList',
    data(){
        return{
            standardCategory:[],    //规范分类
            standardCategoryIndex:0,//分类id
            standardData:[],    //规范列表
            category_id:"", //分类id
            keyword:'',    //搜索关键字
            dialogDelVisible:false, //删除flag
            delId:'',//删除id
            isShowTable:true,
            isEditOrder:false,
            sortable:null,
            sortData:[],
            toastFlag:false,
            toastMsg:''
        }
    },
    mounted(){
        this.getData()
        this.getCategory();
    },
    methods:{
        getData(){  //获取规范列表
            let that = this;
            that.standardData = [];
            this.isEditOrder = false;
            this.$axios.get('/api/standard/admin_list',{
                params:{
                    type:1,
                    category_id:that.category_id,
                    keyword:that.keyword
                }
            }).then((res)=>{
                if(res.data.data && res.data.data.length>0){
                    res.data.data.forEach(element => {
                        element.update_time = formatData(element.update_time);
                        element.isHoverH = false;
                    });
                    that.standardData = res.data.data
                    that.initSortable();
                }
                
            })
        },
        getCategory(){  //获取规范分类
            let that = this;
            that.standardCategory = [];
            this.$axios.get('/api/standard/category').then((res)=>{
               that.standardCategory = res.data.data
            })
        },
        delStand(id,index){    //删除规范
            let that = this;
            this.delId = id;
            this.dialogDelVisible = true;
        },
        delApi(){
            let that = this;
            this.$axios.post('/api/standard/delete',{id:that.delId}).then((res)=>{
                that.getData();
                that.category_id = '';
                that.toastMsg = res.data.message;
                that.toastFlag = true;
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
            })
        },
        searchStand(){
            this.category_id = '';
            this.getData()
        },
        initSortable () {
            var that = this;
            this.sortData = [...this.standardData]
            const el = document.querySelector('.StandList')
            //创建拖拽对象
            this.sortable = Sortable.create(el, {
                sort: that.isEditOrder, //是否可进行拖拽排序
                animation: 150,
                //拖拽完成，移除拖拽之前的位置上的元素，在拖拽之后的位置上添加拖拽元素
                onEnd: ({newIndex, oldIndex}) => {
                    const val = that.sortData[oldIndex]
                    that.sortData.splice(oldIndex, 1)
                    that.sortData.splice(newIndex, 0, val)
                }
            })
        },
        // 编辑展示顺序
        handleIsEditOrder () {
            this.isEditOrder = true
            this.sortable.options.sort = true
        },
        // 取消拖拽顺序
        handleCancelSort () {
            var that = this;
            // 使table先隐藏，再显示，table将恢复拖拽之前的样式
            this.isShowTable = false
            setTimeout(() => {
                that.isShowTable = true
                that.getData()
                // 必须延时，否则重新初始化的sortable无法拖拽
                setTimeout(() => {
                    that.isEditOrder = false
                    that.sortable.options.sort = false
                    that.initSortable()
                }, 200)
            }, 100)
        },
        // 保存拖拽顺序
        async handleSaveSort () {
            let that = this;
            this.isEditOrder = false;
            // console.log(this.sortData);
            let ids = this.sortData.map((item)=> item.id);
            this.$axios.post('/api/standard/sort',{
                ids,
                type:'1',
                category_id:that.category_id,
                keyword:that.keyword
            }).then(res =>{
                // console.log(res)
                that.toastMsg = res.data.message;
                that.toastFlag = true;
                setTimeout(function(){
                    that.toastFlag = false;
                },1000)
                that.getData();
            })
            return
            let res = await editBannerOrder(this.sortData)
            if (res.code === 0) {
                // 使table先隐藏，再显示，否则table将无法拖拽
                this.isShowTable = false
                setTimeout(() => {
                    this.isShowTable = true
                    this.isEditOrder = false
                    this.getList()
                }, 100)
            }
        }
    }
}
</script>
<style scoped lang='less'>

    /deep/ .el-dialog{
        padding: 28px !important;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 auto 50px !important;
    }
    /deep/ .el-dialog__header{
        display: none !important;
    }
    /deep/ .el-dialog__body{
        padding: 0 !important;
        .el-select{
            width: 100% !important;
        }
    }
    .dialog_title{
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        line-height: 16px;
        opacity: 0.95;
        font-weight: 500;
        margin-bottom: 20px;
        i{
        color: #E3E3E3;
        }
    }
    .del_text{
        margin-top: 18px;
        font-size: 16px;
        color: #000000;
        opacity: .5;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 400;
    }
    /deep/ .el-dialog__footer{
        padding: 0;
        margin-top: 20px;
        .custom_primary_btn,.custom_info_btn{
            min-width: 83px;
        }
    }
    

    .adminBrandBox{
        header{
            span{
                font-size: 20px;
                font-weight: 500;
                color: #000;
                margin-left: 12px;
            }
            /deep/ .el-input__inner{
                border-radius: 30px;
                width: 128px;
            }
            /deep/ .searchIpt .el-input__inner{
                width: 300px !important;
            }
            aside{
                button{
                    height: 32px;
                    border-radius: 16px;
                    font-size: 14px;
                }
            }
        }
        .StandList{
            margin-top: 17px;
        }
        .StandItem{
            width: 232px;
            height: 232px;
            background: #FFFFFF;
            box-shadow: 0 0 14px 0 rgba(0,0,0,0.10);
            border-radius: 7px;
            position: relative;
            margin: 15px 12px;
            cursor: pointer;
            overflow: hidden;
            
            .StandItemImg{
                height: calc(100% - 63px);
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    max-width: 100%;
                    max-height: 100%;
                }
            }

            .StandItemInfo{
                bottom: 0;
                left: 0;
                padding: 15px;
                line-height: 17px;
                box-sizing: border-box;
                position: absolute;
                width: 100%;
                height: 63px;
                background: #FBFBFC;
                border-radius: 0 0 7.22px 7.22px;
                h4{
                    font-size: 13px;
                }
                time{
                    font-size: 10px;
                    color: rgba(0,0,0,0.30);
                }
            }
            .standHover{
                right: 16px;
                top: 16px;
                position: absolute;
                display: none;
                width: 110px;
                height: 85px;
                div{
                    position: absolute;
                    right: 0;
                    width: 42px;
                    height: 26px;
                    line-height: 26px;
                    background: rgba(0,0,0,0.30);
                    border-radius: 6px;
                    color: #fff;
                    text-align: center;
                    box-sizing: border-box;
                    i{
                        font-size: 25px;
                    }
                }
                
                // padding: 35% 0;
                
                div:hover + .standHoverHandleBox{
                    display: block;
                }
                .standHoverHandleBox{
                    position: absolute;
                    right: 0;
                    top: 36px;
                    width:109px;
                    // height: 77px;
                    background: #FFFFFF;
                    box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
                    font-size: 16px;
                    color: #000000;
                    border-radius: 5px;
                    overflow: hidden;
                    text-align: center;
                    li{
                        height: 38px;
                        line-height: 38px;
                        cursor: pointer;
                    }
                    li:hover{
                        background: #F4F5F8;
                    }
                }
            }
        }
        .StandItem:hover .standHover{
            display: block;
        }
    }
</style>


